<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <HeaderCavas />
            </el-header>
            <el-container>
                <Transition name="left">
                    <el-aside class="aside" width="240px" v-if="flag">
                        <div class="icon" @click="flag = !flag">
                            <el-icon>
                                <CaretLeft />
                            </el-icon>
                        </div>
                        <!-- 画布左侧编辑处 -->
                        <div class="flex_box">
                            <div :draggable="true" @dragstart="comDragstart"
                                v-for="(item, index) in toolStore.componentsData" :key="index" :data-index="index">
                                {{ item.label }}
                            </div>
                        </div>
                    </el-aside>
                </Transition>
                <Transition name="icons">
                    <div class="iconLeft" v-if="!flag" @click="flag = !flag">
                        <el-icon>
                            <CaretRight />
                        </el-icon>
                    </div>
                </Transition>


                <el-main class="main">
                    <div class="main-left">
                        <MainLeft />
                    </div>
                    <Transition name="right">
                        <div class="main-right" v-if="flagRight">
                            <div class="icon_right" @click="flagRight = !flagRight">
                                <el-icon>
                                    <CaretRight />
                                </el-icon>
                            </div>
                        </div>
                    </Transition>
                    <Transition name="rightIcon">
                        <div class="iconRight" @click="flagRight = !flagRight" v-if="!flagRight">
                            <el-icon>
                                <CaretLeft />
                            </el-icon>
                        </div>
                    </Transition>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts"> 
import HeaderCavas from '../components/canvas/HeaderCavas.vue'
import MainLeft from '../components/canvas/MainLeft.vue'
import { ref } from 'vue';
import { userToolbarStore } from '../store/index'
const toolStore = userToolbarStore()
// console.log(toolStore)
const flag = ref(true)
const flagRight = ref(true)
const comX = ref(0)

// 开始拖动
const comDragstart = (event:any) => {
    // console.log(event.target.dataset)
    comX.value = (event.clientX);
    event.dataTransfer.setData("index", event.target.dataset.index)
}

</script>

<style scoped>
.common-layout {
    /* width: 50%; */
    height: 100%;
}

.el-container {
    height: 100%;
}

.header {
    border: 1px solid #ccc;
    box-shadow: 20px 0px 10px 0px #000;
    /* background-color: cyan; */
}

.main {
    display: flex;
    /* background-color: #eee; */
    background-color: pink;
    padding: 0;
}

.main-left {
    flex: 1;
    background-color: #eee;
}

.main-right {
    width: 220px;
    background-color: #fff;
    position: relative;
}

.aside {
    position: relative;
    overflow: hidden;
    z-index: 666;
}

/* 左侧侧边栏 */
.icon {
    position: absolute;
    width: 40px;
    height: 50px;
    top: 50%;
    right: -15px;
    background-color: #eee;
    line-height: 50px;
    font-size: 35px;
    border-radius: 25px 0 0 25px;
    color: #f00;
}

.iconLeft {
    position: absolute;
    width: 40px;
    height: 50px;
    top: 53.5%;
    left: -5px;
    background-color: #fff;
    line-height: 55px;
    font-size: 35px;
    border-radius: 0 25px 25px 0;
    color: #f00;
}

.left-leave-from {
    width: 240px;
}

.left-leave-active {
    transition: width 1s;
}

.left-leave-to {
    width: 0
}

.left-enter-from {
    width: 0;
}

.left-enter-active {
    transition: 1s;
}

.left-enter-to {
    width: 240px;
}

.icons-enter-from {
    opacity: 0;
}

.icons-enter-active {
    transition: opacity 3s;
}

.cons-enter-to {
    opacity: 1;
}

/* 右侧部分 */
.icon_right {
    position: absolute;
    width: 30px;
    height: 50px;
    top: 50%;
    left: 0px;
    background-color: #eee;
    line-height: 50px;
    font-size: 35px;
    border-radius: 0 25px 25px 0;
    color: #f00;
}

.right-leave-from {
    width: 220px;
}

.right-leave-active {
    transition: 1s;
}

.right-leave-to {
    width: 0;
}

.right-enter-from {
    width: 0;
}

.right-enter-active {
    transition: 1s;
}

.right-enter-to {
    width: 220px;
}

.iconRight {
    position: absolute;
    width: 30px;
    height: 50px;
    top: 53%;
    right: 16px;
    background-color: #fff;
    line-height: 50px;
    font-size: 35px;
    border-radius: 25px 0 0 25px;
    color: #f00;
}

.rightIcon-enter-from {
    opacity: 0;
}

.rightIcon-enter-active {
    transition: 3s;
}

.rightIcon-enter-to {
    opacity: 1;
}

/* 左侧编辑处 */
.flex_box {
    display: flex;
    flex-wrap: wrap;
}


.flex_box>div {
    width: 40%;
    height: 40px;
    line-height: 40px;
    margin: 15px 5%;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 5px;
    user-select: none;
}

.flex_box>div:hover {
    cursor: grab;
    font-weight: 800;

    &:active {
        cursor: grabbing;
    }
}
</style>